import React,{Component, createRef} from 'react';
//获取DOM节点的三种方式
export default class Uncontrol extends Component{
    state = { num: 0 }
    h = createRef()
    componentDidMount(){
        this.refs.inp.focus()
        console.log(this.h);
    }
    add = ()=>{
        this.setState({num:this.state.num+1})
    }
    getNode = node => {
        this.h2=node;
        console.log(node);
    }
    render(){
        return(
            <div>
                {/* 第一种 */}
                <h1 ref="title">refs的用法</h1>
                <input ref="inp"/>

                {/* 第二种 */}
                <h2 ref={this.getNode}>ref回调函数的用法</h2>
                <h3 ref={node=>this.h3=node}>ref回调</h3>

                {/* 第三种 */}
                <h2 ref={ this.h } >createRef()形式</h2>

                <h2>{this.state.num}</h2>
                <button onClick={this.add}>点我+1</button>
            </div>
        )
    }
}